<template>
  <a-modal
    class="add-org-dialog"
    v-model:visible="dataWrapper.visiable"
    title="添加分类"
    @ok="handleOk"
    @cancel="cancel"
  >
    <a-form
      :model="dataWrapper.formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item has-feedback label="父ID" v-bind="validateInfos.pid">
        <a-input
          disabled
          v-model:value="dataWrapper.formData.parentId"
          placeholder="请输入分类父级ID"
        />
      </a-form-item>
      <a-form-item has-feedback label="分类名称" v-bind="validateInfos.name">
        <a-input
          v-model:value="dataWrapper.formData.name"
          placeholder="请输入分类名称"
        />
      </a-form-item>
      <a-form-item has-feedback label="分类范围" v-bind="validateInfos.scope">
        <a-select
          v-model:value="dataWrapper.formData.scope"
          placeholder="请选择分类范围"
        >
          <a-select-option :value="AtlasScope.THEME">
            分组（专题）
          </a-select-option>
          <a-select-option :value="AtlasScope.RECOMMEND">
            推荐分类
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        has-feedback
        label="跳转链接"
        v-bind="validateInfos.redirectUrl"
      >
        <a-input
          v-model:value="dataWrapper.formData.redirectUrl"
          placeholder="请输入跳转链接"
        />
      </a-form-item>
      <a-form-item has-feedback label="banner图" v-bind="validateInfos.banner">
        <div style="width: 220px; height: 100px">
          <SingleImgUpload v-model:image-url="dataWrapper.formData.banner" />
        </div>
      </a-form-item>
      <a-form-item has-feedback label="封面图" v-bind="validateInfos.image">
        <div style="width: 100px; height: 100px">
          <SingleImgUpload v-model:image-url="dataWrapper.formData.image" />
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ValidationRule } from 'ant-design-vue/lib/form/Form'
import { Form } from 'ant-design-vue'
import { ref } from 'vue'
import type { AddClassifyDiaForm, AddClassifyDiaState } from '../type'
import { AtlasScope } from '@/api/premium/category/model/classifyModel'
import { SingleImgUpload } from '@/components/Upload'
const { useForm } = Form

const props = defineProps<{
  dataWrapper: AddClassifyDiaState
}>()

const emits = defineEmits<{
  (e: 'enter'): void
}>()

const rules = ref<Record<keyof AddClassifyDiaForm, ValidationRule[]>>({
  name: [{ required: true, message: '分类名称必填', trigger: 'blur' }],
  parentId: [{ required: true, message: '分类父ID必填', trigger: 'blur' }],
  scope: [],
  isShow: [],
  redirectUrl: [],
  banner: [],
  image: [],
})

const { validate, validateInfos, resetFields } = useForm(
  props.dataWrapper.formData,
  rules
)

const handleOk = () => {
  validate()
    .then(() => {
      emits('enter')
    })
    .catch((err) => {
      console.error(err.errorFields[0].errors[0])
    })
}

const cancel = () => {
  resetFields()
}
</script>

<style lang="scss" scoped>
@include b(add-org-dialog) {
}
</style>
